import React from 'react';
// import { NavLink } from "react-router-dom";
import { Tabs, Avatar, Statistic, Icon } from 'antd';
import CardList from '../../common/cardList/index.jsx';
import './index.less';
const TabPane = Tabs.TabPane;

class Mine extends React.Component {
  constructor(props){
    super(props);
    this.state={
      menuList: [],
      username: '小houhou的厨房'
    }
  }

  componentDidMount() {
    this.getCollectionList();
  }

  getCollectionList = () => {
    if (localStorage.length > 0) {
      let menuList = [];
      for (let index = 0; index < localStorage.length; index++) {
        //获取所有key
        const menuName = localStorage.key(index);
        menuList.push(menuName);
      }
      this.setState({
        menuList : menuList
      })
    }
  }

  render() {
    return (
      <div className="wrap">
        <div className="user-header">
          <Avatar className="avatar"
                  style={{
                    color: '#fff',
                    backgroundColor: '#1890ff',
                    width: 100,
                    height: 100
                  }}
          >
            HOU
          </Avatar>
          <div className="info">
            <h1>{this.state.username}</h1>
            <div className="statistic">
              <Statistic
                className="statistic-item"
                title="我的点赞"
                value={101}
              />
              <Statistic
                className="statistic-item"
                title="我的关注"
                value={11}
              />
            </div>
          </div>
        </div>
        <Tabs defaultActiveKey="1">
          <TabPane
            tab={
              <span>
                <Icon type="star" />
                我的收藏
              </span>
            }
            key="1"
          >
            <div className="collection-content">
              {
                this.state.menuList.map((item,index)=>{
                  return(
                    <div key={index}>
                     <CardList keyword={item}/>
                    </div>
                    
                  )             
                })
              }
            </div>
          </TabPane>
          <TabPane
            tab={
              <span>
                <Icon type="like" />
                我的点赞
              </span>
            }
            key="2"
          />  
        </Tabs>
      </div>
    );
  }
}
export default Mine;